<template>
  <div>
  	<el-dialog title="添加库存" :visible.sync="addVisible" width="30%" :before-close="closeAddOrder" @open="opendEnd">
  		<el-form :model="orderList" ref="addOrder" label-width="100px">
        <el-form-item label="用户名" prop="userName" :rules="[
               { required: true, message: '请选择用户名', trigger:'blur'},
             ]">
                <el-select v-model="orderList.userName" placeholder="请选择用户名" clearable @change="userState()">
                  <el-option
                    v-for="item in sysUsers"
                    :key="item.userId"
                    :label="item.userCode"
                    :value="item.userId" >
                  </el-option>
                </el-select>
          </el-form-item>
        <el-form-item label="收货人" prop="consigneeName" :rules="[
               { required: true, message: '请选择收货人', trigger:'blur'},
             ]">
                <el-select v-model="orderList.consigneeName" placeholder="请选择收货人" clearable>
                  <el-option
                    v-for="item in consignees"
                    :key="item.consigneeId"
                    :label="item.consigneeName"
                    :value="item.consigneeId"
                    v-if="item.userId==orderList.userName">
                  </el-option>
                </el-select>
          </el-form-item>

          <el-form-item label="选择商品" prop="goodsName" :rules="[
                 { required: true, message: '请选择商品', trigger:'blur'},
               ]">
                  <el-select v-model="orderList.goodsName" placeholder="请选择商品" clearable>
                    <el-option
                      v-for="item in goods"
                      :key="item.goodsId"
                      :label="item.goodsName"
                      :value="item.goodsId">
                    </el-option>
                  </el-select>
            </el-form-item>

        <el-form-item label="选择数量" prop="goodsNum" :rules="[
              { required: true, message: '请输入数量名称', trigger: 'blur' },
            ]">
        	<!-- <el-input type="text" v-model="orderList.goodsNum" placeholder="请输入用户名"></el-input> -->
          <template>
            <el-input-number v-model="orderList.goodsNum" controls-position="right"
            @change="handleChange" :min="1" :max="10000"></el-input-number>
          </template>
        </el-form-item>

  		</el-form>
  		<span slot="footer" class="dialog-footer">
  			<el-button @click="closeAddOrder">取 消</el-button>
  			<el-button type="primary" @click="addOrder('addOrder')">确 定</el-button>
  		</span>
  	</el-dialog>
  </div>
</template>

<script>
  export default {
  	name: "",
  	props: ["addVisible","sysUsersList","consigneesList","goodsList"],
  	data() {
  		return {
  			orderList: {
  				userName: "",
          consigneeName: "",
          goodsName:"",
          goodsNum: 1,
  			},
        //添加下拉框数据
        sysUsers:{},
        consignees:{},
        goods:{},
        //是否允许执行方法
        goFunction:true,
  		}
  	},
  	methods: {
      //设置关闭添加页面方法
      closeAddOrder() {
          this.clearData()
      		this.$parent.addVisible = false
      },
      //需要等待dialog 打开完毕后 在金数据渲染
      //设置权限下拉框的默认值
      opendEnd(){
        //渲染用户名下拉数据
        this.sysUsers = this.$props.sysUsersList
        //渲染收货人下拉框数据
        this.consignees = this.$props.consigneesList
        //渲染商品下拉框数据
        this.goods = this.$props.goodsList
      },
      userState(){
        // console.log("进入清空方法")
        if(this.orderList.userName=="" || this.orderList.userName==null){
          this.orderList.consigneeName=""
        }
      },
      ////清除文本框数据，返回相对应文本框的值
      clearData(){
          this.orderList={
            userName: "",
            consigneeName: "",
            goodsName:"",
            goodsNum: 1,
          }
          this.opendEnd()
      },
      //计数器方法
      handleChange(value) {
        console.log(this.orderList.goodsNum);
      },
      checkInfo(){
        console.log("执行语法检查")
        let self = this
        self.goFunction = true
        //判断数量是否为空
        if(this.orderList.goodsNum!=null && self.goFunction){
          //判断是否含有非法字符
          if(String(this.orderList.goodsNum).split(" ").length==1){
            //判断数量是否符合规格
            var reg = /(^[1-9]\d*$)/
            if(!reg.test(this.orderList.goodsNum) || Number(this.orderList.goodsNum)===0){
              //不符合规格不允许执行查询方法
              self.goFunction = false
              self.$message({
                duration: 1500,
                message: "数量不符合规格!",
                type: "error",
                onClose: function() {
                  self.loadStatus = false
                },
              });
            }
          }else{
            //不符合规格不允许执行查询方法
            self.goFunction = false
            self.$message({
              duration: 1500,
              message: "数量文本框中存在非法字符空格!",
              type: "error",
              onClose: function() {
                self.goodsList.price = ""
                self.loadStatus = false
              },
            });
          }
        }
      },
      addOrder(params) {
        var self = this
        this.$refs[params].validate((valid) => {
        	if (valid) {
            var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
            //执行数量规格查询
            self.checkInfo()
            //是否允许执行查询方法
            if(self.goFunction){
              self.$http({
                url: "/api/CakeShop/OrderManage/addOrder",
                method: "post",
                headers: {
                  token: onlineManager.token
                },
                data: {
                  order:{
                    goodsId:this.orderList.goodsName,
                    goodsNum:this.orderList.goodsNum,
                    consigneeId:this.orderList.consigneeName,
                  }
                },
              }).then(function(res) {
                console.log(res)
                // if(res.data.exist===0){
                  if (res.data.udpSuccNum>0) {
                    self.$message({
                      message: res.data.msg,
                      type: 'success',
                      onClose: function() {
                        //添加完毕后清楚文本框中内容
                        // self.clearData()
                        //关闭修改界面
                        self.closeAddOrder()
                        //添加完数据返回首页
                        self.$parent.getOrderList(sessionStorage.getItem("page"))
                      }
                    });
                  }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
  }
</script>

<style>
</style>
